import React from "react";
import './TodoFooter.css';
import store from "../../../redux/store";
import { checkAllTodoAction, removeDoneTodo } from "../../../redux/reducers/todoReducer";

export default function TodoFooter() {
  //获得 todo 任务的状态
  let todo = store.getState().todo;

  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" checked={todo.every(item => item.done) && todo.length > 0} onChange={(e) => {
          store.dispatch(checkAllTodoAction(e.target.checked))
        }}/>
      </label>
      <span>
        <span>已完成 {todo.filter(item => item.done).length} </span> / 全部 {todo.length}
      </span>
      <button className="btn btn-danger" onClick={() => {
        store.dispatch(removeDoneTodo());
      }}>清除已完成任务</button>
    </div>
  );
}
